<template>
  <div class="my-container" flex-col-center>
    <!-- 顶部 - 个人基本信息 -->
    <div class="header" mt-50 ml-30 flex>
      <div></div>
      <div class="user-img">
        <img
          :src="psyUserStore.userInfo.avatar"
          w-80
          h-80
          b-rd-full
          style="
            box-shadow: 8px 8px 12px rgba(0, 0, 0, 10%),
              -6px -6px 10px rgb(255, 255, 255);
          "
        />
      </div>
      <div class="user-name-id" mt-20 ml-20>
        <div class="user-name" text-20>
          <h3>{{ psyUserStore.userInfo.username }}</h3>
        </div>
        <div class="user-id" text-14 mt-10>
          <span>No.{{ psyUserStore.userInfo.uid }}</span>
        </div>
      </div>
      <div
        class="logout-button"
        @click="logout()"
        ml-350
        mt-20
        w-100
        h-40
        b-rd-5
        bg-red
        c-white
        flex-center
      >
        退出登录
      </div>
    </div>

    <!-- 用户操作 -->
    <div class="body1" mt-20 p-20 pb-0>
      <el-card class="card">
        <el-row>
          <!-- 未完测评 -->
          <el-col :span="8">
            <div class="option" @click="goToUnderwayPage" flex-col-center>
              <div class="option-image" flex-center>
                <img src="./img/time-lapse.webp" w-24 alt="" />
              </div>
              <div class="option-name" flex-center mt-10>未完测评</div>
            </div>
          </el-col>
          <!-- 浏览记录 -->
          <el-col :span="8">
            <div class="option" flex-col-center>
              <div class="option-image" flex-center>
                <img src="./img/order-history.webp" w-24 alt="" />
              </div>
              <div class="option-name" flex-center mt-10>浏览记录</div>
            </div>
          </el-col>
          <!-- 公开报告 -->
          <el-col :span="8">
            <div class="option" flex-col-center>
              <div class="option-image" flex-center>
                <img src="./img/archive-document.webp" w-24 alt="" />
              </div>
              <div class="option-name" flex-center mt-10>公开报告</div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 个人信息 -->
    <div class="body2" mt-10 p-20 pb-0>
      <el-card class="card">
        <!-- 标题 -->
        <template #header>个人信息</template>

        <!-- 信息 -->
        <div>
          <el-form label-width="auto" label-position="left" :disabled="!modify">
            <!-- 性别 -->
            <el-form-item label="性别">
              <el-select
                v-model="psyUserStore.userInfo.gender"
                placeholder="请选择性别"
              >
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <!-- 文化水平 -->
            <el-form-item label="文化水平">
              <el-select
                v-model="psyUserStore.userInfo.educationLevel"
                placeholder="请选择文化水平"
              >
                <el-option label="小学" value="小学"></el-option>
                <el-option label="初中" value="初中"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="博士" value="博士"></el-option>
              </el-select>
            </el-form-item>
            <!-- 出生日期 -->
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="psyUserStore.userInfo.birthday"
                type="date"
                placeholder="Pick a day"
              />
            </el-form-item>
          </el-form>
        </div>

        <!-- 操作 -->
        <template #footer>
          <div flex-between>
            <div></div>
            <div>
              <div v-if="modify">
                <el-button @click="modify = !modify">取消</el-button>
                <el-button type="primary" @click="modify = !modify"
                  >确定</el-button
                >
              </div>
              <div v-else>
                <el-button
                  type="primary"
                  @click="
                    modify = !modify;
                    console.log(modify);
                  "
                  >修改信息</el-button
                >
              </div>
            </div>
          </div>
        </template>
      </el-card>
    </div>

    <!-- 链接 -->
    <div class="body3" mt-10 p-20 pb-0>
      <el-card class="card">
        <div class="link" flex-between>
          <div flex-center>
            <div><img src="./img/1.webp" w-22 h-22 alt="" /></div>
            <div class="link-name" ml-20>机构版</div>
          </div>
          <div>
            <el-icon>
              <ArrowRight></ArrowRight>
            </el-icon>
          </div>
        </div>
        <el-divider />
        <div class="link" flex-between>
          <div flex-center>
            <div><img src="./img/2.webp" w-22 h-22 alt="" /></div>
            <div class="link-name" ml-20>关于我们</div>
          </div>
          <div>
            <el-icon>
              <ArrowRight></ArrowRight>
            </el-icon>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import usePsyUserStore from "../../../store/psy/psyUser";
import useUserStore from "@/store/modules/user";

const psyUserStore = usePsyUserStore();
const userStore = useUserStore();

// const userInfo = ref({
//   uid: '1',
//   username: '---',
//   avatar: './img/avatar.webp'
//   gender: '男',

// });
// Object.apply(userInfo.value, userStore.userInfo);
// const gender = ref("女");
// const degree = ref("高中");
// const birthday = ref(new Date());

const modify = ref(false);
const $router = useRouter();

const goToUnderwayPage = () => {
  $router.push("/psy/table/underway");
};

function logout() {
  if (window.confirm("确定注销并退出系统吗？")) {
    userStore.logOut().then(() => {
      location.href = "/index";
    });
  }
}
</script>

<script>
/**
 * 个人中心界面
 * 负责人：唐诗轶
 */
export default {
  name: "My",
};
</script>

<style lang="scss" scoped>
.option {
  cursor: pointer;
  transition: all 0.2s;
}

.option:active {
  transform: scale(0.9);
}

.link {
  cursor: pointer;
  transition: all 0.2s;
}

.link:active {
  transform: scale(0.98);
}

.card {
  border-radius: 20px;
}

// ::v-deep .el-card {
//   box-shadow: none !important;
// }

.logout-button {
  cursor: pointer;
}

.logout-button:hover {
  transition: all 0.2s;
  transform: scale(1.05);
}
</style>
